import styles from './nav.less';
import { Link, history, useIntl } from 'umi';

export default function UserPage() {
  const intl = useIntl();
  const { pathname, query = {} } = history.location;
  let navSelected = 0;
  if (pathname) {
    if (['/settings/generalinfo'].includes(pathname)) {
      if (query.id) {
        navSelected = 3;
      } else {
        navSelected = 1;
      }
    } else if (['/settings/quickreplies'].includes(pathname)) {
      navSelected = 2;
    } else if (['/settings/usermanagement'].includes(pathname)) {
      navSelected = 3;
    } else if (['/settings/autoreply'].includes(pathname)) {
      navSelected = 4;
    }
  }

  const stoageUserinfo = localStorage.getItem('userinfo') || '{}';

  const user = JSON.parse(stoageUserinfo);

  return (
    <div className={styles.navContainer}>
      <h4 className={styles.title}>{intl.formatMessage({ id: 'settings' })}</h4>
      <div className={styles.menu}>
        <Link
          to="/settings/generalinfo"
          className={`${styles.item} ${navSelected === 1 ? styles.active : ''}`}
        >
          <span>{intl.formatMessage({ id: 'generalinfo' })}</span>
        </Link>
        {user.type === 'captain' ? (
          <Link
            to="/settings/quickreplies"
            className={`${styles.item} ${
              navSelected === 2 ? styles.active : ''
            }`}
          >
            <span>{intl.formatMessage({ id: 'quickrepliesmanagement' })}</span>
          </Link>
        ) : null}
        {user.type === 'captain' ? (
          <Link
            to="/settings/autoreply"
            className={`${styles.item} ${
              navSelected === 4 ? styles.active : ''
            }`}
          >
            <span>{intl.formatMessage({ id: 'autorepliesmanagement' })}</span>
          </Link>
        ) : null}
        {user.type === 'captain' ? (
          <Link
            to="/settings/usermanagement"
            className={`${styles.item} ${
              navSelected === 3 ? styles.active : ''
            }`}
          >
            <span>{intl.formatMessage({ id: 'usermanagement' })}</span>
          </Link>
        ) : null}
      </div>
    </div>
  );
}
